/* 
推荐页面
1 推荐列表 
2 月份列表 
3 热门列表 
*/

<template>
  <scroll-view
    class="recommend_view"
    scroll-y
    @scrolltolower="handleToLower"
    v-if="recommends.length > 0"
  >
    <!-- 推荐 开始 -->
    <view class="recommend_wrap">
      <navigator
        class="recommend_item"
        v-for="item in recommends"
        :key="item.id"
        :url="`/pages/album/index?id=${item.target}`"
      >
        <image :src="item.thumb" mode="widthFix" />
      </navigator>
    </view>
    <!-- 推荐 结束 -->

    <!-- 月份 开始 -->
    <view class="months_wrap">
      <!-- 标题 -->
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{ months.DD }} / </text>
            {{ months.MM }} 月
          </view>
          <view class="months_text">{{ months.title }}</view>
        </view>
        <view class="months_title_more">更多 > </view>
      </view>
      <!-- 内容 -->
      <view class="month_content">
        <view
          class="month_item"
          v-for="(item, index) in months.items"
          :key="item.id"
        >
          <go-detail :list="months.items" :index="index">
            <image
              mode="aspectFill"
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
            />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份 结束 -->

    <!-- 热门 开始 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hots_item" v-for="(item, index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image :src="item.thumb" mode="widthFix" />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门 结束 -->
  </scroll-view>
</template>

<script>
import moment from 'moment';
import goDetail from '@/components/goDetail';

export default {
  components: {
    goDetail
  },
  data() {
    return {
      // 推荐列表
      recommends: [],
      // 月份列表
      months: {},
      // 热门列表
      hots: [],
      // 请求参数
      params: {
        limit: 9,
        order: 'hot',
        skip: 0
      },
      // 是否还有下一页
      hasMore: true
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '首页'
    });
    this.getRecommendList();
  },
  methods: {
    // 获取接口的数据
    getRecommendList() {
      this.request({
        url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
        data: this.params
      }).then((result) => {
        // 第一次发送请求
        if (this.recommends.length === 0) {
          // 推荐列表
          this.recommends = result.res.homepage[1].items;
          // 月份列表
          this.months = result.res.homepage[2];
          // 将时间戳 改成 18号/01月 moment.js
          this.months.MM = moment(this.months.stime).format('MM');
          this.months.DD = moment(this.months.stime).format('DD');
        }

        // 判断还有没有下一页数据
        if (result.res.vertical.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: '没有数据了',
            icon: 'none'
          });
          return false;
        }

        // 热门列表
        this.hots = [...this.hots, ...result.res.vertical];
      });
    },
    // 上拉加载-执行分页
    handleToLower() {
      /* 
      1 修改参数  skip += limit
      2 发起请求  getRecommendList()
      3 请求成功  hots 数据叠加，ES6数组拼接
      */
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getRecommendList();
      } else {
        uni.showToast({
          title: '没有数据了',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 滚动视图
.recommend_view {
  // height : 屏幕高度 - 头部标题的高度
  height: calc(100vh - 36px);
}

// 推荐
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    image {
      border: 5rpx solid #fff;
    }
  }
}

// 月份
.months_wrap {
  // 标题
  .months_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .months_title_info {
      display: flex;
      font-size: 30rpx;
      color: $color;
      .months_info {
        text {
          font-size: 36rpx;
          font-weight: 600;
        }
      }
      .months_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }
    .months_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }
  // 内容
  .month_content {
    display: flex;
    flex-wrap: wrap;
    .month_item {
      width: 33.33%;
      image {
        border: 5rpx solid #fff;
      }
    }
  }
}

// 热门
.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      padding-left: 20rpx;
      border-left: 20rpx solid $color;
      font-size: 34rpx;
      font-weight: 600;
    }
  }
  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 33.33%;
      image {
        border: 5rpx solid #fff;
      }
    }
  }
}
</style>
